<template>
	<view class="container" id="investigate">
		<view>
			<image src="/static/bgdc.png" mode="" class="bgdc"></image>
		</view>
		<view class="card">
			<view class="title">
				<view>中医症候积分表</view>
				<view>症候分类与评分标准</view>
			</view>
			<uni-table border emptyText="暂无更多数据" class="table_x">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" rowspan="2">症候类型</uni-th>
					<uni-th align="center" colspan="3">症状评分</uni-th>
					<uni-th align="center" rowspan="2">总分</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-th align="center">症状</uni-th>
					<uni-th align="center">体征</uni-th>
					<uni-th align="center">分数</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in investigateData" :key="index">
					<uni-td align="center" v-if="item.rowspan" :rowspan="item.rowspan" width="20">{{ item.name }}症</uni-td>
					<uni-td align="center">{{ item.zz }}</uni-td>
					<uni-td align="center" width="150">
						<uni-data-select v-model="item.score" :localdata="item.arr" @change="change"
							:data-index="index"  :placement="investigateData.length-index>4?'bottom':'top'"></uni-data-select>
					</uni-td>
					<uni-td align="center">
						<view class="score">{{ item.score?item.score:0 }}</view>
					</uni-td>
					<uni-td align="center" v-if="item.rowspan" :rowspan="item.rowspan"><view class="score">{{ item.totalscore?item.totalscore:0 }}</view></uni-td>
				</uni-tr>
				<!-- <uni-tr height="20"></uni-tr> -->
			</uni-table>
			<view class="evaluate" v-if="totalEv.length>0">
				<view >综合评价：</view>
				<view class="evaluateList">
					<view v-for="(item,index) in totalEv" :key="index" class="evaluateItem">
						<text :style="{ color: getColor(item.leval) }">{{item.leval}}</text>
						<text >{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="card1">
			<view class="question">
				<view class="tag">可多选</view>
				<view>是否有以下慢性病？</view>
			</view>
			<view>
				<view v-for="(item,index) in otherInvestigate" :key="item.id" class="listItem"
					@click="selectItem(index,item)" :class="item.selected?'active':''">
					<view class="label">{{item.label}}</view>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
			<view class="btn" @click="submit()">确认</view>
		</view>
       <view class="desc">注意：该调查是为了更好地帮助您进行慢性病的调理，请认真填写。</view>
	</view>
</template>

<script>
	import investigate from "./investigate.js" 
	export default {
		data() {
			return {
				value: 1,
				colors: {
					'轻度': '#42A5F5', // 轻度-绿色
					'中度': '#FFA726', // 中度-黄色
					'重度': '#D32F2F'  // 重度-红色
				  },
				otherInvestigate: [{
						name: '高血压',
						label: 'A',
						selected:false
					},
					{
						name: '高血脂',
						label: 'B',
						selected:false
					},
					{
						name: '糖尿病',
						label: 'C',
						selected:false
					},
					{
						name: '高尿酸',
						label: 'D',
						selected:false
					},
					{
						name: '心脑血管疾病',
						label: 'E',
						selected:false
					},
				],
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				investigateData:[],
				totalEv:[]
			};
		},
		onLoad() {
			this.investigateData=investigate
		},
		methods: {
			getColor(level) {
			  return this.colors[level] || '#666';
			},
			change(e) { 
				this.$nextTick(_ => {
					this.investigateData = this.addSumToOriginal(this.investigateData, 'ename', 'score', 'totalscore');
					setTimeout(_=>{
						this.totalEv=this.mergeAndDeduplicate(this.investigateData,'ename')
					},500)
				})
			},

			addSumToOriginal(arr, groupBy, sumField, newField) {
				// 1. 先计算相同 groupBy 的 sumField 总和
				const sumMap = arr.reduce((acc, item) => {
					const key = item[groupBy];
					acc[key] = (acc[key] || 0) + Number(item[sumField]);
					return acc;
				}, {});   
				// 2. 在原数组的每个对象上添加新字段
				return arr.map(item => ({
					...item,
					[newField]: sumMap[item[groupBy]]
				}));
			},
			mergeAndDeduplicate(arr, prop) {
			  return Object.values(arr.reduce((acc, item) => {
				const key = item[prop];
				if (!acc[key]) {
				  acc[key] = { ...item };
				} else {
				  // 合并逻辑，这里假设需要相加的属性是 'value'
				  acc[key].score =item.totalscore
				  acc[key].leval=this.getLevel(item.totalscore) 
				}
				return acc;
			  }, {}));
			},
			selectItem(index,item){
				this.otherInvestigate[index].selected=!item.selected
			},
			getLevel(number) {
			  const levels = [
			    { min: 0, max: 13, name: '轻度' },
			    { min: 13, max: 25, name: '中度' },
			    { min: 25, max: 37, name: '重度' }
			  ];
			  
			  const level = levels.find(l => number >= l.min && number < l.max);
			  return level ? level.name : '超出范围';
			},
			submit(){
				const emptyItems = this.investigateData.filter(item => 
					item.score===''
				  );
				  // console.log(emptyItems)
				  if (emptyItems.length > 0) { 
					uni.showModal({
						content:`症状体征没有选择完整！`,
						showCancel:false
					})
				  } else {
					uni.showToast({
						title:'成功',
						icon:'success'
					})
				  } 
			}
		}
	};
</script>

<style scoped lang="scss">
	#investigate {
		background: radial-gradient(0% 0% at 0% 0%, #B3D1FF 0%, #8BA4FF 49%), #FFFFFF;
		min-height: 100vh;
		width: 750rpx;
		margin: auto;
        padding-bottom: 60rpx;
		.bgdc {
			width: 750rpx;
			height: 630rpx;
		}

		.card {
			background: #f4f9ff;
			border-radius: 30rpx;
			width: 670rpx;
			margin: auto;
			box-sizing: border-box;
			padding: 40rpx 20rpx;
			margin-top: -130rpx;
			position: relative;
		}

		.title {
			font-size: 32rpx;
			color: #000;
			font-weight: bold;
			text-align: center;
			line-height: 1.5;
			padding-bottom: 20rpx;
		}

		.m_title {
			font-size: 40rpx;
			color: #333;
			font-weight: 600;
		}

		.score {
			font-weight: bold;
		}
	}

	.container {
		min-height: 100vh;
	}

	.icon-down {
		width: 20rpx;
		height: 20rpx;
		display: inline-block;
	}

	.table_x {
		/* 表格样式 */
	}

	.card1 {
		background: #f4f9ff;
		border-radius: 30rpx;
		width: 670rpx;
		margin: auto;
		box-sizing: border-box;
		padding: 60rpx;
		margin-top: 150rpx;

		.question {
			font-weight: bold;
			font-size: 32rpx;
			margin-bottom: 50rpx;
			display: flex;
			align-items: center;

			.tag {
				width: 130rpx;
				height: 63rpx;
				background: #6376CF;
				border-radius: 12px 12px 12px 12px;
				text-align: center;
				line-height: 63rpx;
				font-size: 28rpx;
				color: #fff;
				margin-right: 30rpx;
			}
		}

		.listItem {
			height: 100rpx;
			display: flex;
			background: #fff;
			border-radius: 30rpx;
			align-items: center;
			padding: 0 30rpx;
			margin-top: 30rpx;
			box-sizing: border-box;
			border: 2px solid #fff;

			.name {
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}

			.label {
				font-size: 30rpx;
				color: #999;
				width: 40rpx;
				height: 40rpx;
				line-height: 30rpx;
				text-align: center;
				border: 2px solid #999;
				border-radius: 6rpx;
				margin-right: 30rpx;
				box-sizing: border-box;
			}

			&.active {
				border: 2px solid #6276CF;

				.label {
					color: #fff;
					border: 2px solid #6276CF;
					background: #6276CF;
				}
			}

		}
	}
	.desc{ 
		font-weight: 500;
		font-size: 20rpx;
		color: #FFFFFF; 
		text-align: center;
		 margin-top: 40rpx; 
	}
	.btn{
		width: 426rpx;
		height: 64rpx;
		background: #18B0E2;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin: 60rpx auto;
		font-size: 28rpx;
		line-height: 64rpx;
		text-align: center;
		color: #fff;
	}
	.evaluate{
		display: flex;
		margin-top: 40rpx;
	    font-size: 28rpx;
		line-height: 2;
		padding: 0 30rpx;
		.evaluateList{
			flex: 1;
			color: #666;
			padding-left: 20rpx;
			.evaluateItem{
				display: inline-block;
				margin-right: 30rpx;
			}
		}
	}
</style>